import React, { Component } from 'react';
import './Product.scss'
import axios from 'axios'
import { Link } from 'react-router-dom'
class product extends Component {
    constructor(props) {
        super(props)
        this.state = {
            states: [],
            statesslice: [],
            numberOfPages: [],
            lineNumber: 10,
            statesindex: 0,
            examineShow: false,
            examineShowData: [],
            //排序
            serialnumber: true,
            //排序类型
            serialnumbers: ''


        }
    }
    //排序
    Liftingsequence(att, arr) {
        if (att == true) {
            this.setState({
                serialnumbers: arr
            })
            this.rendering(this.state.statesindex)
            this.setState({
                serialnumber: false,
            })
            return;
        } else if (att == false) {
            this.setState({
                serialnumbers: arr
            })
            this.rendering(this.state.statesindex)
            this.setState({
                serialnumber: true,
            })
            return;
        }
    }
    //查看弹出框的显示与数据
    exShow(show, itme) {
        this.setState({
            examineShow: show,
            examineShowData: itme
        })
    }
    //页数按钮的样式与数据
    numberskip(index) {
        this.rendering(index)
        this.setState({
            statesindex: index
        })
    }
    //首尾页与上下页的样式及数据渲染
    PageUpAndDown(att, arr) {
        if (att == 'ups') {
            let statesindexs = arr
            console.log(statesindexs);
            this.setState({
                statesindex: statesindexs
            })
            this.numberskip(statesindexs)
        } else if (att == 'downs') {
            let statesindexs = arr
            this.setState({
                statesindex: statesindexs
            })
            this.numberskip(statesindexs)
        }

    }
    //单条数据的删除及视图刷新
    del(index) {
        alert('确定删除本条数据吗?')
        let GoodsID = this.state.statesslice[index].goodsID
        axios.get(`http://api.aulence.com/store-manage/w2001/goods-manage-dzIwMDEtZ3JvdXAx/goods-delete.php?goodsID=${GoodsID}`).then(res => {
            console.log(res.data);
            this.rendering(this.state.statesindex)
        })
    }
    //数据请求及分页数据截取的封装，分页个数
    rendering(index) {
        axios.get('http://api.aulence.com/store-manage/w2001/goods-manage-dzIwMDEtZ3JvdXAx/goods-info.php').then(res => {
            console.log(res.data);
            if (this.state.serialnumbers == '') {
                let datas = res.data.slice(index * this.state.lineNumber, this.state.lineNumber * (1 + index))
                let numberOfPagess = Math.ceil(res.data.length / this.state.lineNumber);
                let arr = []
                for (let i = 0; i < numberOfPagess; i++) {
                    arr.push(i + 1)
                }
                this.setState({
                    statesslice: datas,
                    numberOfPages: arr
                })
                return;
            } else if (this.state.serialnumbers != '') {
                if (!this.state.serialnumber) {
                    res.data.sort((a1, a2) => {
                        return a2[this.state.serialnumbers] - a1[this.state.serialnumbers]
                    })
                    let datas = res.data.slice(index * this.state.lineNumber, this.state.lineNumber * (1 + index))
                    let numberOfPagess = Math.ceil(res.data.length / this.state.lineNumber);
                    let arr = []
                    for (let i = 0; i < numberOfPagess; i++) {
                        arr.push(i + 1)
                    }
                    this.setState({
                        statesslice: datas,
                        numberOfPages: arr
                    })
                } else if (this.state.serialnumber) {
                    res.data.sort((a1, a2) => {
                        return a1[this.state.serialnumbers] - a2[this.state.serialnumbers]
                    })
                    let datas = res.data.slice(index * this.state.lineNumber, this.state.lineNumber * (1 + index))
                    let numberOfPagess = Math.ceil(res.data.length / this.state.lineNumber);
                    let arr = []
                    for (let i = 0; i < numberOfPagess; i++) {
                        arr.push(i + 1)
                    }
                    this.setState({
                        statesslice: datas,
                        numberOfPages: arr
                    })
                }
            }
        })
    }
    //路由跳转修改
    btnFnss(item) {
        console.log(23);
        this.props.history.push({ pathname: '/about', params: { id: item, name: 2 } })
    }
    //初始视图
    componentDidMount() {
        this.rendering(0)
    }
    render() {
        return (
            <div className="Product">
                <header>
                    <div>库存信息管理</div>
                </header>
                <main>
                    <div className="table-box">
                        <table>
                            <thead>
                                <tr>
                                    <th onClick={() => this.Liftingsequence(this.state.serialnumber, "goodsID")} style={{cursor: 'pointer'}}>序号</th>
                                    <th>品牌</th>
                                    <th>名称</th>
                                    <th>型号</th>
                                    <th>分类</th>
                                    <th>入库时间</th>
                                    <th onClick={() => this.Liftingsequence(this.state.serialnumber, "quantity")} style={{cursor: 'pointer'}}>数量</th>
                                    <th onClick={() => this.Liftingsequence(this.state.serialnumber, "price")} style={{cursor: 'pointer'}}>单价</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    this.state.statesslice.map((itme, index) => {
                                        return (
                                            <tr key={index}>
                                                <td>{itme.goodsID}</td>
                                                <td>{itme.brand}</td>
                                                <td>{itme.goodsName}</td>
                                                <td>{itme.model}</td>
                                                <td>{itme.category}</td>
                                                <td>{itme.intoDatetime}</td>
                                                <td>{itme.quantity}</td>
                                                <td>￥{itme.price}</td>
                                                <td>
                                                    <button className="examine" onClick={() => this.exShow(true, itme)}>查看</button>
                                                    <button className="modification" onClick={() => this.btnFnss(itme)}>修改</button>
                                                    <button className="delete" onClick={() => this.del(index)}>删除</button>
                                                </td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
                    <div className="skip">
                        <button
                            className="buttons"
                            onClick={() => this.PageUpAndDown('downs', 0)}
                            className={this.state.statesindex == 0 ? "actives" : "buttons"}
                        >首页</button>
                        <button
                            className="buttons"
                            onClick={() => this.PageUpAndDown('ups', this.state.statesindex - 1)}
                            className={this.state.statesindex == 0 ? "actives" : "buttons"}
                        >上一页</button>
                        {
                            this.state.numberOfPages.map((item, index) => {
                                return (
                                    <button
                                        className="button"
                                        onClick={this.numberskip.bind(this, index)}
                                        key={index}
                                        className={this.state.statesindex == index ? "active" : "button"}
                                    >{item}</button>
                                )
                            })
                        }
                        <button
                            className="buttons"
                            onClick={() => this.PageUpAndDown('downs', this.state.statesindex + 1)}
                            className={this.state.numberOfPages.length == 0 || this.state.statesindex == this.state.numberOfPages.length - 1 ? "actives" : "buttons"}
                        >下一页</button>
                        <button
                            className="buttons"
                            onClick={() => this.PageUpAndDown('downs', this.state.numberOfPages.length - 1)}
                            className={this.state.numberOfPages.length == 0 || this.state.statesindex == this.state.numberOfPages.length - 1 ? "actives" : "buttons"}
                        >尾页</button>
                    </div>
                </main>
                <div className="examine-box" style={{ display: (this.state.examineShow === false) ? "none" : "block" }}>
                    <div>
                        <div className="examine-information">
                            <div>商品详情信息</div>
                            <div onClick={() => this.exShow(false, [])}>X</div>
                        </div>
                        <div className="examine-details">
                            <div>品牌:</div>
                            <div>{this.state.examineShowData.brand}</div>
                        </div>
                        <div className="examine-details">
                            <div>名称:</div>
                            <div>{this.state.examineShowData.goodsName}</div>
                        </div>
                        <div className="examine-details">
                            <div>型号:</div>
                            <div>{this.state.examineShowData.model}</div>
                        </div>
                        <div className="examine-details">
                            <div>分类:</div>
                            <div>{this.state.examineShowData.category}</div>
                        </div>
                        <div className="examine-details">
                            <div>入库时间:</div>
                            <div>{this.state.examineShowData.intoDatetime}</div>
                        </div>
                        <div className="examine-details">
                            <div>数量:</div>
                            <div>{this.state.examineShowData.quantity}</div>
                        </div>
                        <div className="examine-details">
                            <div>单价:</div>
                            <div>￥{this.state.examineShowData.price}</div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default product;